import "./MeterReadDetail.css"
import { Button, Space, Table } from "antd";
import type { TableProps } from 'antd';
import { useEffect, useState } from "react";
import MeterReadDetailMock from "@/mock/MeterReadDetailMock"

interface DataType {
  _id: string;
  roomNum: string;  //  房间号
  instrumentName: string; // 仪表名称
  payItem: string; //  收费项目
  meterReadMonth: number; //  抄表月份
  chargeStartDate: string; // 收费起止日期
  currentMeterRead: number; // 本期用度
  totalCost: number; //  费用合计（元） 
}





export default function test() {
  const [data, setData] = useState<DataType[]>([])
  const [pagesize, setPagesize] = useState(5)

  useEffect(() => {
    setData(MeterReadDetailMock)
    console.log(MeterReadDetailMock[0])
  })

  const columns: TableProps<DataType>['columns'] = [
    {
      title: '房间号',
      dataIndex: 'roomNum',
      key: 'roomNum',
      render: (text) => <span>{text}</span>,
    },
    {
      title: '仪表名称',
      dataIndex: 'instrumentName',
      key: 'instrumentName',
      render: (text) => <span>{text}</span>
    },
    {
      title: '收费项目',
      dataIndex: 'payItem',
      key: 'payItem',
      render: (text) => <span>{text}</span>
    },
    {
      title: '抄表月份',
      dataIndex: 'meterReadMonth',
      key: 'meterReadMonth',
      render: (text) => <span>{text}</span>
    },
    {
      title: '收费起止日期',
      dataIndex: 'chargeStartDate',
      key: 'chargeStartDate',
      render: (text) => <span>{text}</span>
    },
    {
      title: '本期用度',
      dataIndex: 'currentMeterRead',
      key: 'billScurrentMeterReadtate',
      render: (text) => <span>{text.toFixed(2)}</span>
    },
    {
      title: '费用合计（元）',
      dataIndex: 'totalCost',
      key: 'totalCost',
      render: (text) => <span>{text.toFixed(2)}</span>
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => { console.log(record) }}>详情</a>
        </Space>
      ),
    },
  ];




  // 选中数据的回调函数
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
  };

  return (
    <div className="MeterReadDetail">
      <div className="MeterReadDetail-header">
        <span>费用列表</span>
        <div>
          <Button className="MeterReadDetail-header-btn">批量操作</Button>
        </div>
      </div>
      <div className="MeterReadDetail-content">
        <Table<DataType>
          rowSelection={{ type: 'checkbox', onChange: onSelectChange }}
          columns={columns}
          dataSource={data}
          rowKey="_id"
          pagination={{
            position: ["bottomCenter"], // 分页器显示在底部
            pageSize: pagesize,        // 每页显示 5 条数据
            total: data.length, // 总数据条数
            showSizeChanger: true, // 允许用户改变每页显示的条数
            pageSizeOptions: [3, 5, 7, 9], // 每页显示条数的选项
            onShowSizeChange: (current, pageSize) => {  //  页码回调函数
              setPagesize(pageSize)
            }
          }} />
      </div>
    </div>
  )
}
